<template>
  <div class="carousel">
    <button class="el-carousel__arrow el-carousel__arrow--left" @click="prev(current-1)">
      <i class="el-icon-arrow-left"></i>
    </button>
    <button class="el-carousel__arrow el-carousel__arrow--right" @click="next(current+1)">
      <i class="el-icon-arrow-right"></i>
    </button>
    <div v-for="item in items" @click="selected(item)" :class="{'active':item.id === checkedItem.id}" class="list__item">
      <div class="list-img__item">
        <img :src="item.image" :alt="item.display">
      </div>
      <a href="javascript:;" class="list-title">{{item.display}}</a>
    </div>
  </div>
</template>
<style>
.carousel {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  /*display: table;*/
}

.list__item {
  display: table-cell;
  flex: 1;
  height: 200px;
  flex-direction: column;
  margin-left: 8px;
  border: 1px solid #ddd;
  vertical-align: baseline;
  cursor: pointer;
}

.list__item i {
  display: none;
}

.list-img__item {
  width: 200px;
  height: 200px;
}

.list-title {
  color: #333;
  text-decoration: none;
  display: block;
  margin-top: 8px;
}

.circle {
  border-radius: 100%;
}

.active,
.success {
  color: #13ce66;
}

.active:before {
  font-family: element-icons!important;
  content: "\E609";
  position: absolute;
  margin-top: 1em;
  font-size: 4em;
  margin-left: -0.5em;
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: center;
  vertical-align: bottom;
  /*height: 100%;*/
}
</style>
<script>
// import HeaderComponent from './components/header.vue'
export default {
  props: {
    itemMap: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      default() {
        return Object(this.itemMap).length
      }
    },
    size: {
      type: Number,
      default: 8
    },
    current: {
      type: Number
    }
  },
  data() {
    return {
      msg: 'hello vue',
      loading: false,
      pageSum: Math.ceil(this.total / this.size),
      checkedItem: { id: null }
    }
  },
  methods: {
    selected(item) {
      // 查找widgetxml定义，获取 默认值 action ??
      if (this.loading) return
      //        this.loading = true
      //        this.action(item).then(data => {
      // todo 赋值给xml定义
      this.checkedItem.id = item.id
      //        }).finaly(() => { this.loading = false })
    },
    next(page) {
      this.current = page * this.size > this.total ? 0 : page
    },
    prev(page) {
      this.current = page < 0 ? this.pageSum : page
    }
  },
  computed: {
    items() {
      const _items = {}
      const end = this.current * this.size
      const start = end - this.size
      Object.keys(this.itemMap).forEach((key, index) => {
        if ((index > start || index === start)  && (index < end || index === end)) {
          _items[key] = this.itemMap[key]
        }
      })
      //        this.items = _items
      return _items
    }
  },
  components: {}
}
</script>
